<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="预付费" name="prepay">
          <div class="header">
            <div>
              <el-date-picker
                v-model="searchTerms.month"
                class="date-picker"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                @change="getData"/>
              <div class="money"><i class="el-icon-info"/> 费用总额：<span>{{ totalMoney }}</span></div>
            </div>
            <div>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入内容" class="input-with-select search-input" @change="getData">
                <el-select slot="prepend" v-model="searchTerms.searchSelected" class="search-select">
                  <el-option value="order_id" label="订单号"/>
                  <el-option value="client_uin" label="客户账号ID"/>
                  <el-option value="client_remark" label="客户备注"/>
                </el-select>
              </el-input>
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" highlight-current-row
                    @sort-change="handleSortChange">
            <el-table-column prop="orderId" label="订单号" min-width="240">
              <template slot-scope="scope">
                <el-button type="text" @click="$router.push({path: '/tencent/order',query: { orderId: scope.row.orderId }})">{{ scope.row.orderId }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="payTime" label="支付时间" min-width="190" sortable/>
            <el-table-column prop="clientUin" label="客户账号ID/备注" min-width="200">
              <template slot-scope="scope">
                {{ scope.row.clientUin }}
                <div style="font-size: 12px; color: #b7b7b7;">{{ scope.row.clientRemark?scope.row.clientRemark:'--' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="clientType" label="客户类型" min-width="130">
              <template slot="header" slot-scope="scope">
                <el-dropdown style="padding-left: 0;" @command="handleCustomerTypeCommand">
                  <span class="el-dropdown-link">
                    客户类型<i class="el-icon-arrow-down el-icon--right"/>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="">全部</el-dropdown-item>
                    <el-dropdown-item command="new">新拓</el-dropdown-item>
                    <el-dropdown-item command="assign">指定</el-dropdown-item>
                    <el-dropdown-item command="old">存量</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
              <template slot-scope="scope">
                {{ scope.row.clientType==='assign'?'指定':scope.row.clientType==='new'?'新拓':'存量' }}
              </template>
            </el-table-column>
            <el-table-column prop="goodsType" label="云产品" min-width="160"/>
            <el-table-column prop="payerMode" label="支付方式" min-width="150">
              <template slot="header" slot-scope="scope">
                <el-dropdown style="padding-left: 0;" @command="handlePayTypeCommand">
                  <span class="el-dropdown-link">
                    支付方式<i class="el-icon-arrow-down el-icon--right"/>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="">全部</el-dropdown-item>
                    <el-dropdown-item command="selfpay">自付</el-dropdown-item>
                    <el-dropdown-item command="agentpay">代付</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
              <template slot-scope="scope">
                {{ scope.row.payerMode==='agentpay'?'代付':'自付' }}
              </template>
            </el-table-column>
            <el-table-column prop="amt" label="费用(元)" min-width="150">
              <template slot-scope="scope">
                {{ (scope.row.amt/100).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-tab-pane>
        <el-tab-pane label="后付费" name="postpay">
          <div class="header">
            <div>
              <el-date-picker
                v-model="searchTerms.month"
                class="date-picker"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                @change="getData"/>
              <div class="money"><i class="el-icon-info"/> 费用总额：<span>{{ totalMoney }}</span></div>
            </div>
            <div>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入内容" class="input-with-select search-input">
                <el-select slot="prepend" v-model="searchTerms.searchSelected" class="search-select">
                  <el-option value="client_uin" label="客户账号ID"/>
                  <el-option value="client_remark" label="客户备注"/>
                </el-select>
              </el-input>
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" highlight-current-row
                    @sort-change="handleSortChange">
            <el-table-column prop="clientUin" label="客户账号ID/备注" min-width="200">
              <template slot-scope="scope">
                {{ scope.row.clientUin }}
                <div style="font-size: 12px; color: #b7b7b7;">{{ scope.row.clientRemark?scope.row.clientRemark:'--' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="clientType" label="客户类型" min-width="130">
              <template slot="header" slot-scope="scope">
                <el-dropdown style="padding-left: 0;" @command="handleCustomerTypeCommand">
                  <span class="el-dropdown-link">
                    客户类型<i class="el-icon-arrow-down el-icon--right"/>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="">全部</el-dropdown-item>
                    <el-dropdown-item command="new">新拓</el-dropdown-item>
                    <el-dropdown-item command="assign">指定</el-dropdown-item>
                    <el-dropdown-item command="old">存量</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
              <template slot-scope="scope">
                {{ scope.row.clientType==='assign'?'指定':scope.row.clientType==='new'?'新拓':'存量' }}
              </template>
            </el-table-column>
            <el-table-column prop="goodsType" label="云产品" min-width="160"/>
            <el-table-column prop="payerMode" label="支付方式" min-width="150">
              <template slot="header" slot-scope="scope">
                <el-dropdown style="padding-left: 0;" @command="handlePayTypeCommand">
                  <span class="el-dropdown-link">
                    支付方式<i class="el-icon-arrow-down el-icon--right"/>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="">全部</el-dropdown-item>
                    <el-dropdown-item command="selfpay">自付</el-dropdown-item>
                    <el-dropdown-item command="agentpay">代付</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
              <template slot-scope="scope">
                {{ scope.row.payerMode==='agentpay'?'代付':'自付' }}
              </template>
            </el-table-column>
            <el-table-column prop="amt" label="费用(元)" min-width="150">
              <template slot-scope="scope">
                {{ (scope.row.amt/100).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { handleSortChange, handleSizeChange, handleCurrentChange, columnCheck } from '@/utils/table'
import {parseTime} from '../../../../utils';

export default {
  data() {
    return {
      activeName: 'prepay',
      searchTerms: {
        searchValue: '',
        searchSelected: 'order_id',
        month: '',
        client_type: '',
        payer_mode: ''
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 280,
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000, 10000],
      total: 0,
      tableData: [],
      totalMoney: ''
    }
  },
  created() {
    this.searchTerms.month = parseTime(new Date(), '{y}-{m}');
    this.getData()
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, columnCheck,
    handleClick(tab, event) {
      if (tab.index === '1') {
        this.searchTerms.searchSelected = 'client_uin'
      }
      this.getData();
    },
    handleCustomerTypeCommand(command) {
      this.searchTerms.client_type = command;
      this.getData({});
    },
    handlePayTypeCommand(command) {
      this.searchTerms.payer_mode = command;
      this.getData({});
    },
    getData(order) {
      this.tableLoading = true
      order || (order = {})
      const url = 'tencent/getAgentBills'
      const data = {
        page_no: this.currentPage,
        page_size: this.pageSize,
        pay_mode: this.activeName,
        settle_month: this.searchTerms.month,
        client_type: this.searchTerms.client_type,
        payer_mode: this.searchTerms.payer_mode
      }
      data[this.searchTerms.searchSelected] = this.searchTerms.searchValue;
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.totalMoney = res.data.money
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    >div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .search-input {
        width: 400px;
        .search-select{
          width: 120px;
        }
      }
      .date-picker{
        width: 140px;
        margin-right: 10px;
      }
      .money{
        font-size: 14px;
        color: #7a7a7a;
        >span{
          color: #ee7a3d;
        }
      }
    }
  }
}
</style>

